<template>
  <div class="container">
      <el-form :rules="rule" :model="form" ref="form" label-position="right" label-width="150px">
        <div class="title-container">
          <h3>分校信息修改</h3>
        </div>
        <el-form-item label="分校名称" prop="school_name">
          <el-input v-model="form.school_name"></el-input>
        </el-form-item>
        <el-form-item label="分校位置" prop="school_address">
          <el-input v-model="form.school_address"></el-input>
        </el-form-item>
        <el-form-item label="分校联系方式" prop="school_phone">
          <el-input v-model="form.school_phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-tag type="success" @click.prevent="jumpPlace" class="iconfont iconicon_GPS"><a>查看、编辑场所信息</a></el-tag>
        </el-form-item>
        <div class="button-container">
          <el-button type="primary" :loading="loading" @click.prevent="edit" icon="el-icon-edit">编辑</el-button>
        </div>
      </el-form>
  </div>
</template>

<script>
  import {getSchoolInfo, updateSchoolInfo} from '@/api/school'
    export default {
        name: "edit",
        inject: ['reload'],
        data () {
            const isPhone = (rule, value, callBack) => {
                //手机正则
                var mobilePtn = /^1[34578][0-9]{9}$/;
                //座机正则
                var landlinePtn = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;

                if ( !mobilePtn.test(value) && !landlinePtn.test(value)) {
                    callBack(new Error('手机号码或者座机号码格式不正确'));
                } else {
                    callBack();
                }
            }
            return {
                form: {
                    school_name: '',
                    school_address: '',
                    school_phone: ''
                },
                loading: false,
                school_id: 0,
                rule: {
                    school_name: [
                        {required: true, message: '分校名称为必填项', trigger: 'blur'}
                    ],
                    school_address: [
                        {required: true, message: '分校地址为必填项', trigger: 'blur'}
                    ],
                    school_phone: [
                        {required: true, message: '分校联系方式为必填项', trigger: 'blur'},
                        {validator: isPhone, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            edit() {
              this.$refs.form.validate(valid => {
                  if (!valid) {
                      return false;
                  }
                  this.loading = true;
                  let data = {
                      school_id: this.school_id,
                      school_name: this.form.school_name,
                      school_address: this.form.school_address,
                      school_phone:  this.form.school_phone
                  };
                  updateSchoolInfo(data).then(response => {
                      this.loading = false;
                      this.$message.success(response.msg);
                      this.$router.push({path: '/school/list'});
                  }).catch( err => {
                      this.loading = false;
                  })
              });
            },
            jumpPlace() {
                this.$router.push({path: '/school/place', query: {school_id: this.school_id}});
            }
        },
        mounted() {
            this.school_id = this.$route.query.school_id;
            getSchoolInfo({school_id: this.school_id}).then(response => {
              this.form.school_name = response.data.name;
              this.form.school_address =  response.data.address;
              this.form.school_phone = response.data.phone;
            }).catch(err => {

            })
        }
    }
</script>

<style lang="scss" scoped>
  .container {
    min-width:90%;
    width: 100%;
    overflow: hidden;

    .el-form {
      width: 700px;
      max-width: 100%;
      position: relative;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 10px auto;
      .title-container{
        width: 700px;
        max-width: 100%;
        text-align: center;
        h3 {
          font-size: 20px;
          height: 30px;
          line-height: 30px;
        }
      }
      .el-input {
        width: 60%;
      }

      .button-container {
        width: 30%;
        max-width: 40%;
        margin: 10px auto;
        .el-button {
          width: 100%;
        }
      }
    }
  }
</style>
